<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="el-global.css" />
		<style type="text/css">
			html,
			body {
				margin: 0;
				padding: 0;
				height: 100%;
				height: 100%;
				background-color: #abd31b;
			}

			body {
				display: flex;
			}

			.qq {
				overflow: hidden;
				width: 25%;
				height: 100%;
				border-radius: 10px;
				box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
			}

			.el-dropdown {
				display: block;
				width: 95%;
				margin: 5px auto;
				border-radius: 10px;
				overflow: hidden;
			}

			.el-button--primary {
				width: 100%;
				background-color: rgba(145, 25, 1, 0.3);
				border: 0;
			}

			.el-button--primary:focus,
			.el-button--primary:hover {
				background: #ff6a99;
				border-color: #66b1ff;
				color: #FFF;
			}

			.xx {
				padding: 15px;
				display: flex;
				justify-content: space-between;
				align-content: space-between;
				box-sizing: border-box;
				flex-wrap: wrap;
			}

			.each {
				border-radius: 10px;
				background: #191919;
				box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
			}

			.el-empty {
				width: 100%;
				height: 100%;
			}

			.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
				background: linear-gradient(to right, rgba(39, 214, 208, 0.8), rgba(17, 61, 222, 0.8)) !important;
			}

			.el-tree-node__content:hover {
				background: lightgray;
			}
		</style>
	</head>
	<body>
		<!-- 属性被绑定后 ：字符串内的按照js执行  :default-expanded-keys="[4]" -->
		<div id="app" style="height: 90%;width: 90%;margin: auto;display: flex;justify-content: space-between;">
			<el-tree :data="data" :props="defaultProps" accordion @node-click="handleNodeClick" node-key='id' class='qq'
			 :highlight-current='true'  :current-node-key="3" >
			</el-tree>
			<div style="width: 10%;background-color: #ffffff;position: relative;" class="qq">
				<el-dropdown @command="command" class='ww' placement='bottom' trigger='click'>
					<el-button type="primary">
						分屏数量:{{cut.num}}<i class="el-icon-arrow-down el-icon--right"></i>
					</el-button>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item v-for="(n,i) in arr" :command='n'>{{n.num}}</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</div>
			<div style="width: 64%;background-color: white;" class="qq xx">
				<div class="each" v-for="i in cut.num" :style="{width:cut.w,height:cut.h}">
					<el-empty description="暂时无视频接入" image-size='80' :src='cut.src[i-1]'></el-empty>
				</div>
			</div>
		</div>
	</body>
	<script src="data.js" type="text/javascript" charset="utf-8"></script>
	<script src="vue.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="el-main.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var app = new Vue({
			el: '#app',
			data: {
				data: data,
				defaultProps: {
					children: 'children', //匹配含有子节点的对应字段 
					label: 'label' //匹配显示文本的字段   accordion开启手风琴模式
				},
				arr: [{
					num: 1,
					w: "100%",
					h: '100%',
					src: [1]
				}, {
					num: 2,
					w: "100%",
					h: '49%',
					src: [1, 2]
				}, {
					num: 4,
					w: "49%",
					h: '49%',
					src: [1, 2, 3, 4]
				}, {
					num: 6,
					w: "49%",
					h: '32%',
					src: [1, 2, 3, 4, 5, 6]
				}, {
					num: 9,
					w: "32%",
					h: '32%',
					src: [1, 2, 3, 4, 5, 6, 7, 8, 9]
				}],
				cut: {
					num: 9,
					w: "32%",
					h: '32%',
					src: [1, 2, 3, 4, 5, 6, 7, 8, 9]
				}
			},
			methods: {
				handleNodeClick(data) { //节点点击事件，可在data里配置自定义字段以便取用
					console.log(data);
				},
				command(e) { //需要子项目配置指令
					this.cut = e
				}
			}
		})
	</script>
</html>
